<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				height: 10000px;
			}
			#head{
				height: 50px;
				background-color: red;
			}
			#search{
				margin-top: 5px;
				width: 60%;
				height: 40px;
				border:2px solid red;
				border-radius: 30px;
				padding-left: 30px;
				position: static;
			}
			#search input{
				height: 30px;
			}
		</style>
		<script>
			function getXiangduiGao(e){
				var h=e.offsetTop;
				while((e=e.offsetParent)!=null)
				{
					h+=e.offsetTop;
				}
				return h;
			}
			window.onscroll=function(){
				//只考虑竖向滚动
				var y=(document.documentElement||document.body).scrollTop;
				//如果滚了y个px,把窗口固定住
				var s=document.getElementById("search");
				var h=getXiangduiGao(s);
				//console.log("搜索框距离窗口顶端的距离"+h);
				if(y>h){
					s.style.position="fixed";
					s.style.top="5px";
				}else{
					s.style.position="static";
					s.style.top=h+"px";
				}
			}
		</script>
	</head>
	<body>
		<div id="head"></div>
		<div id="search">
			<form>
			<input type="text" size="20" name="s" />
			<input type="submit" value="seach"/>
			</form>
		</div>
	</body>
</html>
